<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 页脚样式 */
        footer {
            background: #0d1b2a;
            color: white;
            padding: 3rem 2rem 1.5rem;
            margin-top: 3rem;
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

        .footer-col h3::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: #4cc9f0;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            color: #8d99ae;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-links a:hover {
            color: #4cc9f0;
            padding-left: 5px;
        }

        .footer-links a i {
            width: 20px;
            text-align: center;
        }

        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: #8d99ae;
            font-size: 0.9rem;
        }

        .search-box {
            display: flex;
            margin-top: 1rem;
        }

        .search-input {
            flex: 1;
            padding: 0.8rem;
            border: none;
            border-radius: 5px 0 0 5px;
        }

        .search-button {
            padding: 0.8rem 1rem;
            background: #4361ee;
            color: white;
            border: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .footer-container {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 480px) {
            .footer-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<footer>
    <div class="footer-container">
        <div class="footer-col">
            <h3>关于我们</h3>
            <ul class="footer-links">
                <li><a href="#"><i class="fas fa-info-circle"></i> 平台简介</a></li>
                <li><a href="#"><i class="fas fa-users"></i> 团队介绍</a></li>
                <li><a href="#"><i class="fas fa-newspaper"></i> 新闻动态</a></li>
                <li><a href="#"><i class="fas fa-briefcase"></i> 加入我们</a></li>
            </ul>
        </div>

        <div class="footer-col">
            <h3>帮助中心</h3>
            <ul class="footer-links">
                <li><a href="#"><i class="fas fa-question-circle"></i> 常见问题</a></li>
                <li><a href="#"><i class="fas fa-book"></i> 使用指南</a></li>
                <li><a href="#"><i class="fas fa-shield-alt"></i> 隐私政策</a></li>
                <li><a href="#"><i class="fas fa-file-contract"></i> 服务条款</a></li>
            </ul>
        </div>

        <div class="footer-col">
            <h3>联系方式</h3>
            <ul class="footer-links">
                <li><a href="mailto:contact@rating.com"><i class="fas fa-envelope"></i> 邮箱: contact@rating.com</a></li>
                <li><a href="tel:4001234567"><i class="fas fa-phone"></i> 电话: 400-123-4567</a></li>
                <li><a href="#"><i class="fab fa-weixin"></i> 微信公众号</a></li>
                <li><a href="#"><i class="fab fa-weibo"></i> 新浪微博</a></li>
            </ul>
        </div>

        <div class="footer-col">
            <h3>关注我们</h3>
            <p style="color: #8d99ae; margin-bottom: 1rem;">订阅我们的通讯，获取最新内容和活动信息</p>
            <div class="search-box">
                <input type="email" class="search-input" placeholder="输入您的邮箱">
                <button class="search-button" onclick="subscribeNewsletter()"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <div class="copyright">
        &copy; 2023 内容评级平台 版权所有
    </div>
</footer>

<script>
    function subscribeNewsletter() {
        const email = document.querySelector('.search-input').value;
        if (email.trim() === '') {
            alert('请输入您的邮箱');
            return;
        }
        alert('感谢订阅！您将收到我们的最新资讯到 ' + email);
        document.querySelector('.search-input').value = '';
    }
</script>
</body>
</html>